<template>

    <div class="resume-container">
        <div class="table-head" :class='{loadUpload:loadUpload}'>
        	<a v-if="xmlReport" :href="downLoadTable" class="downloadTable"><i class="fa fa-file-excel-o"></i> 导出任免表</a>
        	干部任免审批表
        	
			<el-upload
					v-if="xmlReport"
					:action='UploadUrl'
					:data = 'dataUpload'
			 	 	 style='float:right;margin-bottom:10px;text-align:right;'
					 :on-success='handleSuccess'
					>
					<el-button size="small" type="primary">导入数据</el-button>
				<div slot="tip" class="el-upload__tip">上传文件不能超过10MB</div>
			</el-upload>
			
        </div>

        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td colspan="2" width="10%">姓&nbsp;名</td>
                    <td width="15%">{{info[0].name}}</td>
                    <td width="10%">性&nbsp;别</td>
                    <td width="15%">{{info[0].sex_descr}}</td>
                    <td width="15%">出生年月<br>(岁)</td>
                    <td width="15%">{{info[0].birthdate | handleDate}}<br>{{info[0].birthdate | calculateAge}}(岁)</td>
                    <td width="20%" rowspan="4">
                        <img :src="srcImg" alt=""  width="100%" class="form-photo">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">民&nbsp;族</td>
                    <td>{{info[0].ethnic_grp}}</td>
                    <td>籍&nbsp;贯</td>
                    <td>{{info[0].native_place_chn}}</td>
                    <td>出 生 地</td>
                    <td>{{info[0].birthplace}} </td>
                </tr>
                <tr>
                    <td colspan="2">入&nbsp;党<br>时&nbsp;间</td>
                    <td> {{summary.c_party_time | handleDate}}</td>
                    <td>参加工<br>作时间</td>
                    <td>{{summary.c_work_time | handleDate}} </td>
                    <td>健康状况</td>
                    <td>{{summary.c_health_descr}} </td>
                </tr>
                <tr>
                    <td colspan="2">专业技<br>术职务</td>
                    <td colspan="2">{{summary.c_tech_position}} </td>
                    <td>熟悉专业<br>有何专长</td>
                    <td colspan="2">{{summary.c_profesol_spec}} </td>
                </tr>
                <tr>
                    <td colspan="2" rowspan="2">学&nbsp;历<br>学&nbsp;位</td>
                    <td>全日制<br>教&nbsp;育</td>
                    <td colspan="2">
                        {{summary.c_ful_edu_desc}}<br/>
                    	{{summary.c_ful_edu_deg}}
                    </td>
                    <td>毕业院校<br>系及专业</td>
                    <td colspan="2" class="align-left">      
                        {{summary.c_ful_edu_school}}<br/>{{summary.c_ful_edu_major}}
                    </td>
                </tr>
                <tr>
                    <td>在&nbsp;职<br>教&nbsp;育</td>
                    <td colspan="2">
                        {{summary.c_wrk_edu_desc}}<br/>
                        {{summary.c_wrk_edu_deg}}
                    </td>
                    <td>毕业院校<br>系及专业</td>
                    <td colspan="2" class="align-left">
                        {{summary.c_wrk_edu_school}}<br/>{{summary.c_wrk_edu_major}}
                    </td>
                </tr>
                <tr>
                    <td colspan="3">现&nbsp;任&nbsp;职&nbsp;务</td>
                    <td colspan="5" class="align-left"> 
                        {{summary.c_current_job}}
                    </td>
                </tr>
                <tr>
                    <td colspan="3">拟&nbsp;任&nbsp;职&nbsp;务</td>
                    <td colspan="5" class="align-left">
                        {{summary.c_intended_job}}
                     </td>
                </tr>
                <tr>
                    <td colspan="3">拟&nbsp;免&nbsp;职&nbsp;务</td>
                    <td colspan="5" class="align-left"> 
                        {{summary.c_inte_remov_job}}
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-bordered">
            <tbody><tr>
                <td >简<br><br><br><br>历</td>
                <td colspan="6" class="align-left vertical-align-top">
                    <!--{{repeatResume(personResumeInfo.exresume)}}<br/>-->
                    <!--<ul>
                        <li style="clear:both;line-height:40px;" v-for="(value,index) in personResumeInfo.exresume" :key="index">
                            <div style="float:left;width:150px">{{(value.c_begin_dt_desc || '') +'&nbsp;-&nbsp;' + (value.c_end_dt_desc || '') }}</div>
                            <div style="float:left">{{(value.comments || '')}}</div>
                        </li>
                    </ul>-->
                 
                    <div v-html="summary.c_leader_resume" style="line-height:28px;font-size:14px;padding:0px 10px 28px 10px;">

                    </div>
                </td>
            </tr>
            <tr>
                <td>奖<br>惩<br>情<br>况</td>
                <td colspan="6" class="align-left">
                	<div v-html="summary.c_rewrd_punish" style="line-height:28px;font-size:14px;">
                		
                	</div>
    
                </td>
            </tr>
            <tr>
                <td>年核<br>度结<br>考果</td>
                <td colspan="6" class="align-left">
                    {{summary.c_anual_exam_reslt}}
                </td>
            </tr>
            <tr>
                <td>任<br>免<br>理<br>由</td>
                <td colspan="6" class="align-left">

                </td>
            </tr>
            
            <tr>
                <td width="7%" rowspan="8">家<br>庭<br>主<br>要<br>成<br>员<br>及<br>重<br>要<br>社<br>会<br>关<br>系</td>
                <td width="15%">称谓</td>
                <td width="15%">姓名</td>
                <td width="5%">年龄</td>
                <td width="8%">政&nbsp;治<br>面&nbsp;貌</td>
                <td width="50%" colspan="2">工作单位及职务</td>
            </tr>
            <tr v-for="relationItem in relation" :key="relationItem.id">
                
                    <td>{{relationItem.c_relship_desc}}</td>
                    <td>{{relationItem.name}}</td>
                    <td >{{relationItem.age | calculateAge}}</td>
                    <td>{{relationItem.c_political_sta}}</td>
                    <td colspan="2" class="align-left">{{relationItem.c_work_unit_job}}</td>
                
            </tr>
            <tr v-for="(relationItem,index) in relationWhite" :key="index">
                    <td>&nbsp;</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td colspan="2"></td>
                
            </tr>
         
            <tr>
                <td>呈<br>报<br>单<br>位</td>
                <td colspan="6">
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p class="align-right">{{new Date().getFullYear()}} 年 {{new Date().getMonth() + 1}} 月 {{new Date().getDate()}} 日</p>
                </td>
            </tr>
            <tr>
                <td>审意<br>批&nbsp;<br>机&nbsp;<br>关见</td>
                <td colspan="4">
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p class="align-right">（盖章）</p>
                    <p class="align-right">年&nbsp;&nbsp;月&nbsp;&nbsp;日</p>
                </td>
                <td width="7%">行任<br>政免<br>机意<br>关见</td>
                <td>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p class="align-right">（盖章）</p>
                    <p class="align-right">年&nbsp;&nbsp;月&nbsp;&nbsp;日</p>
                </td>
            </tr>
            <tr>
                <td colspan="7" class="align-left" style="border-color: transparent;">填表人：</td>
            </tr>
         </tbody>
        </table>
    </div>



</template>
<script>
	import Vue from 'vue'
	import { Upload,Message} from 'element-ui'

	Vue.use(Upload)
    export default {
        name:'resume',
        data(){
            return {
                personResumeInfo:null,
                summary:{},
                info:[{}],
                work:null,
                workWhite:null,
                workLength:null,
                edu:null,
                eduWhite:null,
                relation:null,
                relationWhite:null,
                certificate:null,
                certificateWhite:null,
                col:5,
                loadUpload:false,
                text:null,
                xmlReport:false,
                
            }
        },
        created:function(){
//      	var emplid = this.getEmplid("emplid");
//      	var emplid = localStorage.getItem("em_leader");
//      	this.Axios.Post(this.URL.getEmployeeImg.url,{
//                  emplid:emplid
//             }).then(res=>{
//              	this.srcImg = 'data:image/png;base64,'+ res.data.message;
//              })

            
        },
        computed: {
            srcImg : function(){
            	
            	return this.Axios.baseURI + this.URL.getEmployeeImgNew.url + '?emplid=' + localStorage.getItem("em_leader") + '&sex=' +localStorage.getItem("lead_sex") + '&token=' + localStorage.getItem('token');
             	            
            },
			UploadUrl:function(){

				return this.Axios.baseURI+ this.URL.getUploadFile.url ;
			},
			dataUpload:function(){
				var info = this.info[0] || {};
				return {
					name:info.name,
					emplid:localStorage.getItem("em_leader"),
					token:localStorage.getItem('token')
				}
			},
          	downLoadTable : function(){
	            return this.Axios.baseURI + this.URL.getAppointRemoveByEmplid.url + '?emplid='+ localStorage.getItem("em_leader") + '&token=' + localStorage.getItem('token') ;
         	}
        },
        props:{

        },
        filters:{
            handleDate:function(value){
                if (!value) {return}
                if (value.trim().length <= 7) {
                	return value;
                }
                return value.split(' ')[0].split('-')[0] + '.' +value.split(' ')[0].split('-')[1];
            },
            calculateAge:function(value){
            	if (!value) {
            		return
            	}
            	
            	if (value.trim().length <= 4) {
            		return value;
            	}
            	var res = value.split(' ')[0];
            	
                return new Date().getFullYear() - new Date(res).getFullYear();
            },
            handleWorkTime:function(value){
            	if (!value) {
            		return
            	}
            	return value.split(' ')[0];
            }
        },

        methods:{
            getEmplid:function(keyToValue){
                var url = window.location.search;
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    // var keys = [],values = [];
                    for (var i=0;i<strs.length;i++) {
                        var splitKey = strs[i].split("=");
                        if (keyToValue === splitKey[0]) {
                            return splitKey[1];
                            // break;
                        }
                    } 
                }
            },
            repeatResume:function(arr){
                var str='';
                for (var i=0;i<arr.length;i++) {
                    str += (arr[i].c_begin_dt_desc || '') +'-' + (arr[i].c_end_dt_desc || '') + (arr[i].comments || '') ;
                }
                console.log(str);
                return str;
               
            },
            handleSuccess:function(response){

            	var message = response.message;
            	this.loadUpload = true;
            	if (response.status == '1') {
		            Message({
		              type: 'success',
		              message: '导入成功'
		            })
	    			setTimeout(function(){
	    				location.reload();
	    			},800)
            	} else {
		            Message({
		              type: 'error',
		              message: message
		            })            		
            	}

//          	
            },
        },
        mounted:function(){
            var self=this;
//          var emplid = this.getEmplid("emplid");
            var emplid = localStorage.getItem("em_leader");
            
            this.Axios.Post(this.URL.listAppointOrRemoveForm.url,{emplid:emplid})
			.then(function(res){
				var personResumeInfo= typeof res.data === "string" ? JSON.parse(res.data).datas : res.data.datas;
                
                if (!personResumeInfo) {
                	return;
                }
                
                self.xmlReport = personResumeInfo.xmlReport;
                
                self.personResumeInfo = personResumeInfo;
                
                personResumeInfo.summary && (self.summary = personResumeInfo.summary[0])
                
                self.info = JSON.parse(JSON.stringify(personResumeInfo.info));

                self.relation = JSON.parse(JSON.stringify(personResumeInfo.relation));
                               
                if (self.relation.length < 7) {
                    self.relationWhite = new Array(7-self.relation.length);
                }                                 

			})
        }


    }
</script>
<style scoped>


    .resume-container .table-head {
        font-size: 24px;
        text-align: center;
        margin: 20px 0px 20px 0px;
    }
    .resume-container .table-head .btn-download{
        display: inline-block;
        margin-bottom: 0;
        font-weight: normal;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        border: 1px solid transparent;
        border-radius: 4px;
        padding: 5px 10px;
        font-size: 12px;
        line-height: 1.5;
        border-radius: 3px;
        color: #fff;
        background-color: #5bc0de;
        border-color: #46b8da;
    }

    .resume-container {
        width: 86%;
        margin:auto;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 1.42857143;
        color: #333;
        background-color: #fff;
    }
    .resume-container .form-photo {

        vertical-align: middle;
    }
    .resume-container .table tbody tr td {
        text-align: center;
        vertical-align: middle;
        font-size: 14px;
        font-family: 宋体;
        padding: 2px 5px 2px 5px;
        height: 40px;
    }
    .resume-container .table-bordered {
        border: 1px solid #ddd;
    }
    .resume-container .table {
        width: 100%;
        max-width: 100%;
    }
    .resume-container .table-bordered  td {
        border: 1px solid #ddd;
    }
    .resume-container .table .label-bold {
    font-weight: bold;
    }
    .resume-container .table .align-right {
        text-align: right;
        padding-right: 30px;
    }
    .resume-container .table p {
        line-height: 30px;
        margin: 0 0 10px;
    }

    .resume-container .table tbody tr td {
        text-align: center;
        vertical-align: middle;
        font-family: 宋体;
        word-break: break-all;
    }
    .resume-container .table .align-left {
        text-align: left;
    }
    .resume-container .table > thead > tr > th, .table > tbody > tr > th, .resume-container .table > tfoot > tr > th, .table > thead > tr > td, .resume-container .table > tbody > tr > td, .resume-container .table > tfoot > tr > td {
        line-height: 1.42857143;
        border-top: 1px solid #ddd;
    }   


</style>
<style>
.resume-container .submit-item {
	  padding-bottom: 20px;
	  .el-button {
	    position: absolute;
	    top: -20px;
	    left: 20%;
	    transform: scale(1.1) translateX(-70%);
	  }
	}
.resume-container .loadUpload .el-upload-list{
	display:none;
}	
.el-upload__tip{
	display:none;
}
.resume-container .el-button--small{
	font-size:14px;
}

.resume-container	.el-upload__input{
	display: none;
}


.resume-container a.downloadTable{
  display: inline-block;
  padding: 0 15px;
  height: 30px;
  line-height:30px;
  font-size:14px;
  vertical-align: bottom;
  float: left;
  background-color:#20a0ff;
  color:#fff;
  border-radius: 4px;
  
}

html body{
	background: #fff !important;
}
</style>

